<div class="demo-tooltip">
  <h1>Tooltip Demo</h1>

  <p class="centered">
    <button #tooltip="mdTooltip"
        md-raised-button
        color="primary"
        [md-tooltip]="message"
        [tooltip-position]="position">
      Mouse over to see the tooltip
    </button>
  </p>

  <p>
    <md-radio-group [(ngModel)]="position">
      <md-radio-button value="below">Below</md-radio-button>
      <md-radio-button value="above">Above</md-radio-button>
      <md-radio-button value="left">Left</md-radio-button>
      <md-radio-button value="right">Right</md-radio-button>
      <md-radio-button value="before">Before</md-radio-button>
      <md-radio-button value="after">After</md-radio-button>
    </md-radio-group>
  </p>

  <p>
    <strong>Message: </strong>
    <md-input type="text" [(ngModel)]="message"></md-input>
  </p>

  <strong>Mouse over to</strong>
  <button md-raised-button color="primary" (mouseenter)="tooltip.show()">
    Show tooltip
  </button>
  <button md-raised-button color="primary" (mouseenter)="tooltip.hide(0)">
    Hide tooltip
  </button>
  <button md-raised-button color="primary" (mouseenter)="tooltip.toggle()">
    Toggle tooltip
  </button>
</div>
